<template>
  <div class="sign-in">
    <h3>学生登录</h3>
    <p v-if="info">{{ info }}</p>
    <!-- 在 el-form 中通过 model 属性绑定 数据对象 -->
    <!-- 在 el-form 中通过 rules 属性绑定 校验规则 -->
    <!-- 在 el-form 中通过 ref 属性指定 引用名称 -->
    <el-form :model="student" 
             :rules="rules" 
             ref="signInForm"
             label-width="200px">
      <!-- 在 el-form-item 中通过 prop 指定 model 的键名 -->
      <el-form-item label="账号" prop="account">
        <el-input v-model="student.account" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="student.password" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  ElForm,
  ElFormItem,
  ElInput,
  ElButton
} from 'element-plus';
export default {
  name: 'SignInView',
  // 将 $route.params.message 通过属性传递
  props: [ 'message' ],
  inject: [ 'students' ],
  data(){
      return {
        // 用来存放账号和密码的对象
        student: {
          account: '',
          password: ''
        },
        // 用来展示提示信息的属性
        info: '',
        // 表单校验规则
        rules: {
          account: [
            { required: true, message: '请输入登录账号', trigger: 'blur' },
            { min: 3, max: 20, message: '账号必须是3到20位', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入登录密码', trigger: 'blur' },
            { min: 3, max: 10, message: '账号必须是3到10位', trigger: 'blur' },
          ],
        }
      }
  },
  methods: {
    login(){
      // 通过模板引用获得由 ElementPlus 提供的表单实例
      let formInstance = this.$refs.signInForm;
      // 调用 ElForm 组件的 validate 方法实现校验
      let promise = formInstance.validate();
      // 处理校验结果
      promise.then( valid => {
        if( valid ) {
          // 根据输入的 账号 从 students 数组中查找 学生对象
          let stu = this.students.find( s => s.account == this.student.account );
          // 直接将 stu 返回 (若找到相应的学生对象则该对象被包裹到一个新的Promise中)
          return stu ;
        }
      }).then( stu => {
        // 若未找到学生对象则视为账号错误
        if( !stu ) {
          this.info = '账号不正确，请重新输入';
          return;
        }
        // 若密码错误
        if( stu.password != this.student.password ) {
          this.info = '密码不正确，请重新输入';
          return;
        }
        // 直接将 stu 返回 (该对象被包裹到一个新的Promise中)
        return stu ;
      }).then( stu => {
        if( stu ) {
          /* = = = 处理登录操作 = = = */
          // 将学生对象转换为JSON格式的字符串后添加到 sessionStorage
          sessionStorage.setItem( 'LOGGED_IN_STUDENT' , JSON.stringify(stu) ); 
          // 采用编程式导航跳转到 学生信息 页面
          this.$router.push( { name: 'StudentProfile' } );
        }
      }).catch( fields => {
        console.log( '未通过校验的字段:' , fields );
      });
    }
  },
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    ElButton
  },
  created(){
    this.info = this.message;
  }
}
</script>

<style scoped>
.sign-in {
  margin: 20px;
}
.sign-in>h3{
  text-align: center;
}
.sign-in>p {
  color: red;
  text-align: center;
}
</style>